<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>统一地图平台API</title>
    <meta name="keywords" content="统一地图平台api">
    <meta name="description" content="统一地图平台api">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="./../script/api.css" rel="stylesheet">
    <script src="./../../js_example/script/map.min.js"></script>
    <script src="./../../js_example/script/demo.js"></script>
</head>

<body class="restdemo-page">
    <div class="page_wrapper">
        <div data-tpl="" class="content-sidebar has_right">
            <div class="content">
                <div class="crumbs">
                    您现在的位置：
                    <a>开发</a>
                    &gt;
                    <a>地图JS API</a>
                    &gt;
                    <a>快速上手</a></div>
                <article>
                    <h1 class="title">
                        快速上手
                        <span class="update-time">最后更新时间: 2020年05月18日</span>
                    </h1>
                    <div>
                        <div class="md-container">
                            <h2>快速上手</h2>
                            <p>第一步，下载<a href="../script/api/v2.0-bate-0611.zip">JS API包</a>。目前项目未打包到npm上，只能通过本地加载方式。
                            </p>
                            <p>第二步，导入统一地图平台服JS API基础包到项目中。</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="html hljs xml">
    // 引入统一地图平台服务脚本
    &lt;script src="./js_example/script/map/map.min.js"&gt;&lt;/script&gt;
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>第三步、地图服务配置</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
        //地图相关服务配置
        map.Config.customToV32({{url}},{{token}}); // {{url}} 表示地图服务根地址。{{token}}表示地图服务的token值
        //地图方案配置 {{solution}}
        style = "minemap://service/solu/style/id/{{solution}}"; // {{solution}} 代表当前地图服务的solution值。
       
        //示例:
        //   http://172.16.119.79:9040/protal/map_service_example/map/detail.html?vector-normal  //门户中地图预览地址
        //配置如下:
        map.Config.customToV32("http://172.16.119.79:9040/","3be5e96f94ae42ad8288763daacbf1eb");
        style = "minemap://service/solu/style/id/raster-normal"; 
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>第四步、初始化地图</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
         var amap = null;
            map.Factory.create('mapui', {
                style: style, //第二步中配置的style值
                center: [110.32343, 19.99401], //中心点
                zoom: 11, //初始化级别
                strategy: ['mapboxgl', 'openlayers', 'leaflet'],//配置地图引擎,三选一。
                fullExtent: {
                    xmin: 108.23365,
                    ymin: 17.95253,
                    xmax: 111.78395,
                    ymax: 20.13104
                } //指定全图的范围
            }, (o) => {
                amap = o;
            });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>第四步，加载自定义图层。</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
            amap.addSource("Geo_TMS", {
                url: "http://129.211.11.95:8066/geoserver/gwc/service/tms",
                maxzoom: 22,
                minzoom: 0,
                serverType: "24",
                layerName: "itfeer:city",
            });
            let layer = amap.addLayer("Geo_TMS_Layer", "Geo_TMS", {
                "type": "fill",
                "source-layer": "city",
                "paint": {
                'fill-color': '#FFC0CB',
                'fill-opacity': 0.4
                }
            })                                
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <p>自定义图层支持ArcGIS,SuperMap,GeoServer发布的WMS,WMTS,WFS和矢量切片服务。具体请参数《图层加载》章节。</p>
                            <p>第五步，切换地图样式，用于切换地图底图。</p>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
             amap.setStyle('mapbox://styles/mapbox/satellite-streets-v10');
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p>地图效果</p>
                        <div id="mapui" style="height:500px;width:100%;">

                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>

    <script>
        var amap = null;
        map.Factory.create('mapui', {
            style: style,
            center: center,
            zoom: 8,
            strategy: ['mapboxgl', 'openlayers', 'leaflet'],
            fullExtent: {
                xmin: 108.23365,
                ymin: 17.95253,
                xmax: 111.78395,
                ymax: 20.13104
                
            },
            controls: ['Scale', 'Navigation']
        }, (o) => {
            amap = o;
        });
    </script>
    
</body>

</html>